<template>
  <el-dialog title="测评票预览" :fullscreen='true' :close-on-click-modal="false" :visible.sync="show" width="100%">
<div class="fontDa">
    <div class="customTableHeader">
      <div class="customTableTitle">{{ cppName }}</div>
    </div>
    <div class="zhaoPian">
      <div style="padding-bottom: 10px;">单位：{{dw}}</div></div>
    </div>
    <div class="cpTable">
      <el-table ref="report-table" :data="tableData" :span-method="objectSpanMethod" border:row-class-name="tableRowClassName">
        <el-table-column label="被评议对象的基本情况" align="center" min-width="300">
          <el-table-column type="index" label="序号" width="70"></el-table-column>
          <el-table-column v-for="col in colShowAll" :prop="col.prop" :label="col.label">
        </el-table-column>
        </el-table-column>
        <el-table-column label="对提拔任用该干部的看法" align="center" min-width="300">
          <el-table-column v-for="(gz,j) in tableColumn" :key="j+10000" :label="gz.optName"
                         :fzIndex="j" align="center" min-width="50">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-success" class="cpCheck" v-if="scope.row.userId==gz.optId"></el-button>
            <el-button type="text" class="cpCheck" v-else><i class="noChecked"></i>
            </el-button>
          </template>
        </el-table-column>
        </el-table-column>
      </el-table>
      <template v-for="(questionList,indexs) in qList">
        <div style="width: 100%;margin-top: 25px;" class="zfheaderbox" >
           <div>{{indexs+1}}、{{questionList.title}}</div>
        </div>
        <div style="width: 100%;" class="zfheaderbox">
          <!--              placeholder="新选拔任用领导人员民主评议表"-->
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10}"
            size="medium"
            readonly
            v-model="answer">
          </el-input>
        </div>
      </template>
      <div style="width: 100%;" class="zfheaderbox">
        <div>{{footerText}}</div>
      </div>
      <!-- <el-button @click="exportExcel(111)">导出</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
import { getUserList,getUserListByDept } from "@/api/ceping/cepingcpppypzb";
export default {
  name: "cpIndexXp",
  data() {
    return {
      msgList:[],
      aa:"",
      shuxing:"top-end",
      show: false,
      cppName: '',
      fzbList: [],
      tableColumn: [],
      tableData: [],
      colShowAll:[],
      qList:[],
      answer:"",
      footerText:"",
      dw:'',
    }
  },
  methods: {
    initConfig(id) {
      this.show = false;

    },
    initXp(r) {
    //  console.log("r:"+JSON.stringify(r))
      this.footerText = r.footerText;
      this.dw = r.sheetDept;
      this.qList = [];
     //console.log(JSON.parse(r.ruleDetailJson))
      this.msgList = JSON.parse(r.ruleDetailJson)
      this.msgList.forEach(item=>{
        if(item.itemType == 1){
          this.tableColumn = item.optList
        }else if(item.itemType == 3){
          this.qList.push(item)
        }
      })
      this.show = false;
      this.$nextTick(() => {
        this.cppName = r.cppName;
        //项目明细
        let ids = '';
        if(r.cpgzBcpmxb){
          let ryList = JSON.parse(r.cpgzBcpmxb);
          var userids=[],deptids=[],usreridstr='',deptidsstr="";
          ryList.forEach(item=>{
            if(item.userId){
              userids.push(item.userId)
            }else{
              deptids.push(item.deptId)
            }
          });
          usreridstr=userids.join(',');
          deptidsstr=deptids.join(',');
          // for (var i = 0; i < ryList.length; i++) {
          //   ids += ryList[i].userId + ',';
          // }
        }
        var userTableData=[],deptTableData=[];
        if(usreridstr){
          getUserList(usreridstr).then(response => {
            response.data.data.forEach(r=>{
              if(r.rySr){
                r.rySr = r.rySr.substring(0,7)
              }
            })
            userTableData = response.data.data
            this.$nextTick(()=>{
              this.tableData = [...userTableData,...deptTableData]
              // console.log('11111111111',this.tableData)
            })
          })
        }
        if(deptidsstr){
          getUserListByDept(deptidsstr).then(response => {
            deptTableData=response.data.data;
            this.$nextTick(()=>{
              this.tableData = [...userTableData,...deptTableData]
              // console.log('11111111111',this.tableData)
            })
            // console.log('222222222222222222',deptTableData)
          })
        }

        // getUserList(usreridstr).then(response => {
        //   this.tableData = response.data.data
        // })
           //人员动态列
        if(r.hostConfigJson){
          this.colShowAll = JSON.parse(r.hostConfigJson);
        }
        this.show = true;
      });


    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {

    },

    getClass(i, len) {
      let x = i + 1;
      if (x / len <= 0.25) {
        return "pjyx";
      } else if (x / len <= 0.5) {
        return "pjjh";
      } else if (x / len <= 0.75) {
        return "pjyb";
      } else {
        return "pjjc";
      }
    },
    tableRowClassName({row, rowIndex}) {
      let fz = this.fzbList.indexOf(this.tableData[rowIndex].zbName1);
      if (fz % 2 == 0) {
        return 'cpRowNormal';
      } else {
        return 'cpRowstripe';
      }
      return '';
    }
  }
}
</script>

<style>
.h_dw_time{
  text-align: left;
}
</style>

